<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用vue获取城市天气的demo</title>
    <script src="../../js/vue.js"></script>
    <script src="../../js/axios.min.js"></script>
    <style>
        .li {
            border-left: 1px solid #666;
            float: left;
            list-style: none;
            margin-left: 20px;
        }

        .li:first-child {
            border-left: none;
        }

        .li * {
            padding: 0 10px 0 10px;
        }

        .weather-div {
            margin-top: 50px;
        }

        .weather-div li:first-child {
            margin-left: 500px;
        }
    </style>
</head>
<body>
<div id="app">
    <div style="text-align: center; margin-top: 200px; font-size: 40px;">天知道</div>
    <div style="text-align: center; margin-top: 40px;">
        <input type="text" style="width: 300px; height: 25px;" v-on:keyup.enter="getCityWeather" v-model.trim="city" placeholder="请输入要查询的城市名称" />
        <button style="background-color: #d5abff; height: 30px;" v-on:click="getCityWeather">搜索</button>
        <br />
        <a href="#" v-for="(item, index) in citys" v-on:click="clickGetWeather(index)">{{ item }}&nbsp;&nbsp;</a>
    </div>
    <div v-show="weatherRes.length > 0" style="text-align: center;" class="weather-div">
        <ul style="margin: 0 auto;">
            <li class="li" v-for="item in weatherRes">
                <h1>{{ item.type }}</h1>
                <p style="color: red;">{{ item.low }} ~ {{ item.high }}</p>
                <p style="color: blue;">{{ item.date }}</p>
            </li>
        </ul>
    </div>
</div>
</body>
<script>

    let app1 = new Vue({
        el: '#app',
        data: {
            city: '',
            citys: ['西安', '北京', '天津', '延安'],
            weatherRes: [],
            yesterday: null
        },
        methods: {
            getCityWeather: function () {
                let vueInstance = this;
                if(this.city === '') {
                    return;
                }
                let url = 'http://wthrcdn.etouch.cn/weather_mini?city=' + vueInstance.city;
                axios.get(url).then(function (response) {
                    console.log(typeof response.data.forecast);
                    vueInstance.weatherRes = response.data.data.forecast;
                    vueInstance.yesterday = response.data.data.yesterday;
                    console.log(111, vueInstance.weatherRes);
                }, function (err) {
                    console.log(err);
                });
            },
            clickGetWeather: function (index) {
                this.city = this.citys[index];
                this.getCityWeather();
            }
        }
    });

</script>
</html>